<template>
    <div class="message">
        <Drawer title="消息中心" v-model="show" :styles="{ padding: '16px 0' }">
            <CellGroup>
                <Cell>
                    <div>消息标题</div>
                    <Badge :count="10" slot="extra" />
                    <div slot="label">消息内容</div>
                </Cell>
                <Cell>
                    <div>消息标题</div>
                    <Badge :count="10" slot="extra" />
                    <div slot="label">消息内容</div>
                </Cell>
                <Cell>
                    <div>消息标题</div>
                    <Badge :count="10" slot="extra" />
                    <div slot="label">消息内容</div>
                </Cell>
                <Cell>
                    <div>消息标题</div>
                    <Badge :count="10" slot="extra" />
                    <div slot="label">消息内容</div>
                </Cell>
            </CellGroup>
        </Drawer>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import { Tools } from "@/model/tools.ts";
@Component
export default class ViewMessage extends Tools {
    @Prop()
    private value!: boolean;
    private get show() {
        return this.value;
    }
    private set show(value) {
        this.$emit("input", value);
    }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable'
</style>
